<canvas id="{{$name}}"></canvas>
<script>
$(function () {
    var ctx = document.getElementById("{{$name}}").getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [@foreach($data['开通会员']['data'] as $key => $value){{$value['x']}},@endforeach],
            datasets: [
                    @foreach($data as $k => $v)
                    {
                        label: '{{$k}}',
                        data: [@foreach($v['data'] as $key => $value){{$value['value']}},@endforeach],
                        backgroundColor:"{{$rgb[$loop->index]}}",
                        borderWidth: 1
                    },
                    @endforeach
            ]
        },
        options: {
            scaleShowGridLines : true,
            scaleGridLineColor : "rgba(0,0,0,.05)",
            scaleGridLineWidth : 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            barShowStroke : true,
            barStrokeWidth : 2,
            barValueSpacing : 5,
            barDatasetSpacing : 1,
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
});
</script>